<template>
  <div class="home">
    <div class="list">
      <girl-item v-for="(item, index) in girls" :key="index" :item="item"/>
    </div>
    <div style="padding: 20px">
      <button v-if="hasNextPage" class="load-more" @click="loadMore">
        加载更多
      </button>
      <div style="text-align: center" v-else>我是有底线的</div>
    </div>
    <loading v-if="isLoading"/>
  </div>
</template>

<script>
import axios from "axios";
import Loading from "@/components/Loading";
import GirlItem from "@/components/GirlItem";

export default {
  name: "Home",
  data() {
    return {
      girls: [],
      currentPage: 1,
      pageSize: 30,
      hasNextPage: true,
      isLoading: false,
    };
  },
  components: {Loading, GirlItem},
  created() {
    this.getGirls();
  },
  methods: {
    getGirls() {
      this.isLoading = true;
      axios({
        method: "GET",
        url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/${this.currentPage}/count/${this.pageSize}`,
      })
        .then((res) => {
          const { data } = res.data;
          console.log(data);
          // this.girls = data
          this.girls = [...this.girls, ...data];
          if (data.length < this.pageSize) {
            console.log("没有下一页");
            this.hasNextPage = false;
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    loadMore() {
      this.currentPage += 1;
      this.getGirls();
      console.log(this.currentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 600px;
  margin: 0 auto;
}

.load-more {
  display: block;
  margin: 0 auto;
}
</style>
